<template>
  <div style="padding: 20px;" v-loading="loading">
    <div style="display: flex; gap: 20px; width: 80%">
      <div style="flex: 1">
        <ekEditor v-model="formData.user_agreement" />
      </div>

      <!-- 右侧小程序预览区域 -->
      <MiniProgramPreview
        :content="formData.user_agreement"
        pageTitle="用户协议"
      />
    </div>
    <div class="flex flex-start" style="margin-left: 20px; margin-top: 20px">
      <el-button type="primary" @click="save()" :loading="saveLoading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, ref } from "vue";
import { getToken } from "@/utils/sys";
import ekEditor from "@/components/form/ekEditor/index.vue";
import MiniProgramPreview from "@/components/business/miniProgramPreview/index.vue";

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox, $imageBaseUrl } =
  globalProperties;

const saveLoading = ref(false);
const formData = ref({
  user_agreement: "",
});
const loading = ref(false);
const init = () => {
  loading.value = true;
  $http
    .get(`business/config/getConfigByGroup?authCode=FUNCTION_CONFIG`, {
      params: { code: "CONFIG_GROUP_USER_AGREEMENT" },
    })
    .then((res) => {
      if (res.status === "success") {
        if (res.data.list?.length) {
          for (let item of res.data.list) {
            formData.value[item.config_key] = item.config_value;
          }
        }
        loading.value = false;
      }
    });
};
const save = () => {
  $http
    .post(
      `business/config/save?authCode=FUNCTION_CONFIG&code=CONFIG_GROUP_USER_AGREEMENT`,
      {
        ...formData.value,
      }
    )
    .then((res) => {
      if (res.status == "success") {
        $ekMessage.success("操作成功");
      }
    });
};

onMounted(async () => {
  init();
});
</script>
